程式基礎 —— Javascript

什麼是 Javascript

Javascript 是一個應用於網頁前端的程式語言。

如何執行 Javascript

1. 在瀏覽器上開啟 devtool 跑
2. node.js —— 讓 Javascript 可以跑在瀏覽器以外的環境上（一個 Javascript 的執行環境）

環境建置

直接去官網下載即可。

萬年傳統 —— Hello World

// index.js
console.log("Hello World!")

1. 在瀏覽器上執行，Devtool 就會印出 Hello World!
2. 在 terminal 上執行，則輸入指令node index.js，就會印出 Hello World!

變數 Variable

基本運算

• 加減乘除 ＋− * /
• 取餘數 ％

基本邏輯運算

• or || → 第一個是 true 就回傳遞第一個值，是 false 就回傳第二個值
  • true || true → true
  • true || false → true
  • 3 || 10 → 3
  • false || 10 → 10
  • 0 || 10 → 10（把 0 視為 false）
• and && （一個 & 有別的含義，不要搞混囉～）
  • true && true → true
  • true && false → false
  • 3 && 10 → 10
  • 10 && 3→ 3
  • false && 3 → false
• not !
  • !true → false
  • !false → true

簡單複習二進位

二進位：由 0 與 1 組成

0100 ( 2^00 + 2^10 + 2^21 + 2^30 ) = 2^2 = 4

1000 = 2^3 = 8

二進位就是把東西往左移後都乘以 2

所以往右移就會變除以 2

位移運算

左移 <<

• 2 << 1 → 4 ( 2 往左移一位 → 4 )
• 10 << 1 → 20
• 10 << 3 → 80

右移 >>

• 1024 >> 1 → 512 ( 1024 往右移一位 → 512 )
• 9 >> 1 → 4

位元運算

位元運算

• 10 & 15 → 10
• 10 | 15 → 15

xor ^

• 2^4 → 6
• 10^15 → 5

邏輯運算

• 10 && 15 → 15
• 10 || 15 → 10

變數宣告

• var / let / const
• 不能取名為數字、保留字，語意化命名
• var box = 123 把 123 的值放在 box 容器裡
  • var box, console.log(box) → undefined 宣告了，但沒賦值
  • console.log(box) → not defined 連宣告都沒宣告
• = / == / ===
  • = 賦值
  • == 判斷值是否相等
  • === 判斷值跟型態是否相等

變數型態

透過 typeof 查詢型態

• string
• number
• boolean
• object
• undefined ( ≠ null )
• function

陣列 Array

index，陣列第一個數字從 0 開始

let class = ['A', 'B', 'C']
class.push('D')
console.log('result', class)
ABCD
class.length = 4

let igPosts = ['URL1', 'URL2', 'URL3'] -> 就變貼文串ㄌ

物件 Object

ket = { value }

const card = {
    name: 'Lindsay;s card',
    job: 'student'
    age: 22
    }
card.name = 'Lindsay;s card'

（延伸閱讀：從博物館寄物櫃理解變數儲存模型）

注意事項

• 字串拼接：不同型態間變數相加，像是字串與數字相加
• 浮點數誤差：有些小數電腦不會儲存的非常精準，所以計算可能會出現預期外的答案
• 建議都使用 === debug 時比較容易

判斷式

• if

var score = 60 
if(score >= 60 && score <= 70){
    console.log('剛好及格')
}

• if... else...

var score = 60
if(score >= 60){
    console.log('pass')
} else {
    console.log('fail')
}

• if ... else if...

var age = 10
if(age >= 65){
    console.log('老人')
} else if (age >= 20){
    console.log('年輕人')
} else {
    console.log('小孩')
}

• switch case

switch(month){
    case 1:
        console.log('一月')
        break
    case 2:
        console.log('二月')
        break
    case 3:
        console.log('三月')
        break
    default:
        console.log('hey')
}

• 三元運算子 Ternary

if (score >= 60){
    msg = 'pass'
} else {
    msg = 'fail'
}
->
var msg = score >= 60 ? 'pass' : 'fail'
score 是不是大於等於 60，是的話回傳 pass，不是的話回傳 fail

迴圈 loop

一直做一樣的事（執行同樣的程式碼），若沒有設定終止條件，就會變無窮迴圈。

迴圈的前世：label、goto ( Javascript 沒有 )

var i = 1
label:
console.log(i)
i++
if(i <= 100){
    goto label
}
console.log('i=', i)

• do... while...

var i = 1
do{
    console.log(i)
    i++
} while(i <= 100)

console,log('i=', i)

• while

var i = 1
while(i <= 100){
    console.log(i)
    i++
}

• for

for ( 初始值; 終止條件; i 每一圈要做的事情 )

for (var i =1; i <= 5; i++){
    console.log(i)
}

函式 function

y= f(x)，y 就是回傳值， f(x) 就是函數，x 就是丟進去的參數

return 後面回傳值不用換行，否則會 undefined

function generateArray(n){
    var result = []
    for(var i = 1; i<=n; i++){
    result.push(i)
    }
    return resule
}
console.log(generateArray(3))

不同函式宣告方式（重要）

function transform(arr, transformFunction){  // 接收 arr, transformFunction 兩個參數
    var result = []
    for(var i=0; i<arr.length; i++){
        result.push(transformFunction(arr[i]))
    }
    return result
}

console.log(
    transform([1, 2, 3], function(x){   // 匿名函式
    return x+4
    })
)

（延伸閱讀：深入探討 JavaScript 中的參數傳遞：call by value 還是 reference？）

不可變 immutable

只有物件、陣列是可變的

return 意義

• function 沒回傳 return 就會回傳預設 return undefined
• 有東西需要它的回傳值就要寫 return
• console.log() 印出 / return 回傳

內建函式

1. 許多程式語言內會有內建的函式，都可以在 MDN 內查找，內建函式加快編寫程式速度，不過即使沒有也能自己實作。
2. 注意每個內建函式回傳值的型態。

• Number
  • parseInt() / parseFloat()
  • Math
  • .toString()
• String
  • .toLowerCase() （延伸閱讀：ASCII碼）
  • String.fromCharCode()
  • .indexOf()
  • .replace() （延伸閱讀：正規表達式）
• Array
  • .join()
  • .map()
  • .slice()
  • .sort()